<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rhythm Synthesizer</title>
    <link rel="stylesheet" href="./main.css">
    <link rel="stylesheet" href="thirdparty/mask/jquery.loadmask.css">
</head>
<body>
    <div id="container">
        <div id="tempo">
            <div class="tempo"></div>
            <div class="change-tempo">
                <img class="up" src="./images/icon-triangle-up.png">
                <img class="down" src="./images/icon-triangle-down.png">
            </div>
        </div>
        <div id="style">
            <label class="btn btn-epic">
                <input type="radio" name="style" value="epic" checked>
                <div></div>
            </label>
            <label class="btn btn-electro">
                <input type="radio" name="style" value="electro">
                <div></div>
            </label>
            <label class="btn btn-chinese">
                <input type="radio" name="style" value="chinese">
                <div></div>
            </label>
        </div>
        <div id="osc1">
            <div class="knobs">
                <div class="knob knob-vol"></div>
                <div class="knob knob-wave">
                    <div class="knob rotatable"></div>
                    <div class="wave wave-triangle" type="triangle"></div>
                    <div class="wave wave-square" type="square"></div>
                    <div class="wave wave-saw" type="saw"></div>
                    <div class="wave wave-sine" type="sine"></div>
                </div>
                <div class="knob knob-attack"></div>
                <div class="knob knob-release"></div>
                <div class="knob knob-unshown"></div>
                <div class="knob knob-unshown"></div>
                <div class="knob knob-fm-wave">
                    <div class="knob rotatable"></div>
                    <div class="wave wave-triangle" type="triangle"></div>
                    <div class="wave wave-square" type="square"></div>
                    <div class="wave wave-saw" type="saw"></div>
                    <div class="wave wave-sine" type="sine"></div>
                </div>
                <div class="knob knob-fm-freq"></div>
                <div class="knob knob-fm-depth"></div>
                <div class="knob knob-unshown"></div>
                <div class="knob knob-unshown"></div>
                <div class="knob knob-filter-cutoff"></div>
                <div class="knob knob-filter-resonance"></div>
                <div class="knob knob-filter-q"></div>
                <div class="knob knob-filter-mod"></div>
            </div>
            <div class="range">
                <div class="range-knob" draggable></div>
            </div>
        </div>
        <div id="osc2">
            <div class="knobs">
                <div class="knob knob-vol"></div>
                <div class="knob knob-wave">
                    <div class="knob rotatable"></div>
                    <div class="wave wave-triangle" type="triangle"></div>
                    <div class="wave wave-square" type="square"></div>
                    <div class="wave wave-saw" type="saw"></div>
                    <div class="wave wave-sine" type="sine"></div>
                </div>
                <div class="knob knob-attack"></div>
                <div class="knob knob-release"></div>
                <div class="knob knob-unshown"></div>
                <div class="knob knob-unshown"></div>
                <div class="knob knob-fm-wave">
                    <div class="knob rotatable"></div>
                    <div class="wave wave-triangle" type="triangle"></div>
                    <div class="wave wave-square" type="square"></div>
                    <div class="wave wave-saw" type="saw"></div>
                    <div class="wave wave-sine" type="sine"></div>
                </div>
                <div class="knob knob-fm-freq"></div>
                <div class="knob knob-fm-depth"></div>
                <div class="knob knob-unshown"></div>
                <div class="knob knob-unshown"></div>
                <div class="knob knob-filter-cutoff"></div>
                <div class="knob knob-filter-resonance"></div>
                <div class="knob knob-filter-q"></div>
                <div class="knob knob-filter-mod"></div>
            </div>
            <div class="range">
                <div class="range-knob" draggable></div>
            </div>
        </div>
        <div id="master">
            <label class="btn btn-boost">
                <input type="checkbox" name="vol" value="boost" checked>
                <div></div>
            </label>
            <div class="knob-master"></div>
        </div>
        <div id="arp">
            <div class="chrod-name"></div>
            <div class="knobs">
                <div class="knob" knob="vol"></div>
                <div class="knob" knob="note-length"></div>
                <div class="knob" knob="swing"></div>
                <div class="knob" knob="rev"></div>
                <div class="knob" knob="delay"></div>
                <div class="knob arptempo" knob="tempo"></div>
            </div>
            <div class="mod">
                <div class="knob"></div>
                <div class="pattern">
                    <select name="pattern">
                        <option value="0">Stay Hot</option>
                        <option value="1">Mad Heart</option>
                    </select>
                </div>
                <label class="btn btn-small random">
                    <input type="checkbox" name="random" value="true">
                    <div></div>
                </label>
            </div>
            <div class="leds"></div>
        </div>
        <div id="bassline">
            <div class="knob vol"></div>
            <select name="pattern">
                <option value="0">Bass</option>
            </select>
            <div class="filter">
                <div class="knob"></div>
                <div class="knob"></div>
                <div class="knob"></div>
                <div class="knob"></div>
            </div>
        </div>
        <div id="beatbeast">
            <canvas class="clip"></canvas>
            <div class="record"></div>
            <div class="play"></div>
            <div class="knob vol"></div>
            <canvas class="clip2" id="clip2"></canvas>
            <div class="r">
                <label class="btn btn-small">
                    <input type="checkbox" name="r" value="pitch">
                    <div></div>
                </label>
                <label class="btn btn-small">
                    <input type="checkbox" name="r" value="pan">
                    <div></div>
                </label>
                <label class="btn btn-small">
                    <input type="checkbox" name="r" value="reverse">
                    <div></div>
                </label>
            </div>
        </div>
    </div>
    <div id="console" style=""></div>
    <script src="thirdparty/jquery/jquery.min.js"></script>
    <script src="thirdparty/jquery/jquery-ui.min.js"></script>
    
    
    <script src="resources/js/ui/jquery.range.js"></script>
    <script src="resources/js/ui/jquery.knob.js"></script>
    <script src="resources/js/ui/jquery.knob2.js"></script>
    <script src="resources/js/ui/jquery.tempo.js"></script>
    <script src="resources/js/ui/jquery.chrod.js"></script>
    <script src="resources/js/ui/jquery.leds.js"></script>
    <script src="thirdparty/mask/jquery.loadmask.min.js"></script>
    
	<script type="text/javascript" src="thirdparty/pagebus/js/simple/pagebus.js"></script>
	<script type="text/javascript" src="thirdparty/json/js/json2.js"></script>
	
	<script type="text/javascript" src="resources/js/jweb.js"></script>
	<script type="text/javascript" src="resources/js/constants.js"></script>
	<script type="text/javascript" src="resources/js/pattern.js"></script>
	<script type="text/javascript" src="resources/js/midihub.js"></script>
	<script type="text/javascript" src="resources/js/waveshaper.js"></script>
	
	<script type="text/javascript" src="resources/js/rsynthesizer.js"></script>
	<script type="text/javascript" src="resources/js/synthbridge.js"></script>
	<script type="text/javascript" src="resources/js/console.js"></script>
	<script type="text/javascript" src="resources/js/3dvisualizer.js"></script>
	
	<script type="text/javascript" src="resources/js/rhythm.js"></script>
    <script type="text/javascript" src="resources/js/application.js"></script>
</body>
</html>